chore: linting fixes #261

georgewrmarshall · 2024-11-28T21:21:41Z

Description

This pull request implements several important TypeScript and linting improvements to enhance code quality and developer experience. Key changes include:

Added .tsx extension to ESLint configuration to ensure proper linting of React TypeScript components
Configured TypeScript path alias for @metamask/design-system-react to enable direct imports and proper IDE support
Enforced import type syntax through ESLint to prevent runtime errors in .mjs files
Updated TypeScript configuration to include the stories folder and its files for design-tokens
Ran prettier to apply consistent formatting across all affected files

These changes collectively improve code maintainability, type safety, and development workflow efficiency.

Related issues

Fixes: N/A

Manual testing steps

Run yarn lint and ensure there are no TypeScript linting errors
Run yarn prettier . to verify that all files adhere to the formatting rules

Pre-merge author checklist

Followed MetaMask Contributor Docs
Completed this PR template
Verified the linting and formatting updates
Applied appropriate labels as per labeling guidelines

Pre-merge reviewer checklist

Manually tested the PR to confirm no regressions
Verified all linting and formatting changes
Confirmed that the updates improve code maintainability

georgewrmarshall · 2024-11-28T21:22:27Z

packages/design-tokens/stories/Shadows.stories.tsx

@@ -3,10 +3,10 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Text, TextColor } from '@metamask/design-system-react';
 import README from './Shadows.mdx';

-interface ShadowSwatchProps {
+type ShadowSwatchProps = {


use type instead of interface

georgewrmarshall · 2024-11-28T21:22:36Z

packages/design-tokens/stories/components/ColorSwatch/ColorSwatch.tsx

@@ -2,7 +2,7 @@ import React, { FunctionComponent } from 'react';
 import { lightTheme } from '../../../src';
 import { Text, TextVariant } from '@metamask/design-system-react';

-interface ColorSwatchProps {
+type ColorSwatchProps = {


use type instead of interface

georgewrmarshall · 2024-11-28T21:22:41Z

packages/design-tokens/stories/components/ColorSwatchGroup/ColorSwatchGroup.tsx

 import { Text, TextVariant } from '@metamask/design-system-react';

-interface ColorSwatchGroupProps {
+type ColorSwatchGroupProps = {


use type instead of interface

georgewrmarshall · 2024-11-28T21:23:25Z

packages/design-tokens/tsconfig.json

+    "jsx": "react",
+    "types": ["react", "node", "jest"]


Needs jsx and react for stories

georgewrmarshall · 2024-11-28T21:24:13Z

packages/design-tokens/tsconfig.json

+    "stories/**/*.tsx",
+    "stories/**/*.ts"


Includes stories folder in typescript checks but does not include them in build because we are excluding storybook files in tsconfig.packages.build.json

georgewrmarshall · 2024-12-02T08:00:44Z

.eslintrc.js

+        '@typescript-eslint/consistent-type-imports': [
+          'error',
+          {
+            prefer: 'type-imports',
+            disallowTypeAnnotations: true,
+            fixStyle: 'separate-type-imports',
+          },
+        ],
+        '@typescript-eslint/no-import-type-side-effects': 'error',


This ESLint rule enforces using import type syntax for type imports, which helps prevent runtime errors in .mjs files where type imports aren't supported. It ensures type imports are properly separated from value imports, making the code more maintainable and compatible with ECMAScript modules.

Before

Accidentally included types in mjs files and there is no linting rule preventing this

After

Linting rule

Revert changes already in the MM eslint plugin https://github.com/MetaMask/eslint-config/blob/733b9e2835c5422a2f222b23cf373f4050936409/packages/typescript/src/index.mjs#L48

georgewrmarshall · 2024-12-02T08:03:30Z

package.json

    "lint:dependencies": "depcheck && yarn dedupe --check",
    "lint:dependencies:fix": "depcheck && yarn dedupe",
-    "lint:eslint": "eslint . --cache --ext js,cjs,mjs,ts",
-    "lint:fix": "yarn lint:eslint --fix && yarn lint:misc --write && yarn constraints --fix && yarn lint:dependencies:fix",
+    "lint:eslint": "eslint . --cache --ext js,cjs,mjs,ts,tsx",


Added .tsx extension to ESLint configuration to ensure React TypeScript components are properly linted. This helps maintain consistent code quality across both JavaScript and TypeScript React and React Native files in our codebase.

georgewrmarshall · 2024-12-02T08:04:03Z

packages/design-system-react/src/components/button/Button.stories.ts

Removing example test Button component from design-system-react as it's no longer needed and will be cleaner to add a new Button component

All instances of Button removed

georgewrmarshall · 2024-12-02T08:05:16Z

packages/design-system-react/src/components/text/Text.stories.tsx

@@ -1,6 +1,7 @@
-import React from 'react';


Lint fixes for Text stories now we are including tsx files

georgewrmarshall · 2024-12-02T08:05:54Z

packages/design-system-react/src/components/text/Text.stories.tsx

+          type="button"
+          onClick={() => {
+            // eslint-disable-next-line no-alert, no-restricted-globals
+            alert('button-clicked');


This was previously using storybook-actions but once we add it as a dev dependency it clashes with the @storybook/addon-actions version we can fix it in a subsequent PR

georgewrmarshall · 2024-12-02T08:06:04Z

packages/design-system-react/src/components/text/Text.tsx

@@ -1,8 +1,10 @@
-import React from 'react';


georgewrmarshall · 2024-12-02T08:06:21Z

packages/design-tokens/package.json

@@ -52,6 +52,7 @@
  "devDependencies": {


Adding missing dev dependency

georgewrmarshall · 2024-12-02T08:06:29Z

packages/design-tokens/stories/BrandColors.stories.tsx

@@ -1,13 +1,14 @@
-import React from 'react';


georgewrmarshall · 2024-12-02T08:06:42Z

packages/design-tokens/stories/ThemeColors.stories.tsx

@@ -1,16 +1,16 @@
 import React from 'react';


georgewrmarshall · 2024-12-02T08:07:11Z

packages/design-tokens/stories/Typography.stories.tsx

@@ -1,26 +1,27 @@
+/* eslint-disable no-restricted-globals */


Lint fixes and ignoring no-restriced-globals so we can get the CSS variables from the stylesheet for typography CSS variables

georgewrmarshall · 2024-12-02T08:07:19Z

packages/design-tokens/stories/components/ColorSwatch/ColorSwatch.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+


georgewrmarshall · 2024-12-02T08:07:32Z

packages/design-tokens/stories/components/ColorSwatch/ColorSwatch.tsx

@@ -1,8 +1,10 @@
-import React, { FunctionComponent } from 'react';


georgewrmarshall · 2024-12-02T08:07:39Z

packages/design-tokens/stories/components/ColorSwatchGroup/ColorSwatchGroup.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';


georgewrmarshall · 2024-12-02T08:07:54Z

packages/design-tokens/stories/components/ColorSwatchGroup/ColorSwatchGroup.tsx

@@ -1,10 +1,11 @@
+import { Text, TextVariant } from '@metamask/design-system-react';


georgewrmarshall · 2024-12-02T08:08:28Z

packages/design-tokens/stories/types/mdx.d.ts

@@ -0,0 +1,15 @@
+/**


For mdx files similarly to design-system-react

georgewrmarshall · 2024-12-02T08:10:02Z

packages/design-tokens/tsconfig.json

+    "paths": {
+      "@metamask/design-system-react": ["../design-system-react/src"]
+    }


Added path alias for @metamask/design-system-react to enable direct imports from the design system package.

Before

After

georgewrmarshall · 2024-12-03T01:21:23Z

.eslintrc.js

@@ -1,3 +1,4 @@
+/* eslint-disable import/unambiguous */


disabled a rule to make our eslintrc file more readable

Before

After

georgewrmarshall · 2024-12-03T01:27:24Z

packages/design-system-react/.eslintrc.js

@@ -0,0 +1,19 @@
+module.exports = {


Added .eslintrc.js to support browser environment in React package

This ESLint configuration extends the root config but adds browser-specific settings. The root ESLint config is Node.js-focused, so this configuration:

Enables browser environment

Disables Node.js environment

Turns off no-restricted-globals rule to allow browser globals

Adds TypeScript configuration for .ts/.tsx files

georgewrmarshall · 2024-12-03T01:32:17Z

packages/design-system-react/.eslintrc.js

+  rules: {
+    'no-restricted-globals': 'off',
+  },
+  ignorePatterns: ['scripts/create-component/ComponentName/**'],


Ignoring component template files

georgewrmarshall added the team-design-system label Nov 28, 2024

georgewrmarshall self-assigned this Nov 28, 2024

georgewrmarshall commented Nov 28, 2024

View reviewed changes

georgewrmarshall marked this pull request as ready for review November 29, 2024 08:01

georgewrmarshall requested a review from a team as a code owner November 29, 2024 08:01

georgewrmarshall mentioned this pull request Nov 29, 2024

feat: initial icon component that renders a basic svg #260

Merged

8 tasks

georgewrmarshall force-pushed the fix/linting-updates branch from 935e228 to 647f03e Compare December 2, 2024 07:57